<template>
	<view class="page-loading" :style="{height: height}">
		<view class="loading" v-if="!showPage" :style="{height: height}">
			<view class="flex" v-if="error">
				<u-icon name="info-circle-fill" size="100" color="#FBD220"></u-icon>
				<text class="text mt-20">网络连接超时！</text>
				<view class="flex btn-retry" @click="onRetry"><text>点击重试</text></view>
			</view>
			<view class="flex" v-else>
				<image class="icon" :src="icon"></image>
				<text class="text">{{text}}</text>
			</view>
		</view>
		<block v-if="mode === 'show'">
			<view v-show="showPage" :class="{show: showPage && animation}" :style="{height: height}">
				<slot></slot>
			</view>
		</block>
		<block v-if="mode === 'if'">
			<view v-if="showPage" :class="{show: showPage && animation}" :style="{height: height}">
				<slot></slot>
			</view>
		</block>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref, watch, getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	let timeout = 10
	let timer = ref(null)
	
	let	time = ref(timeout)
	let showPage = ref(false)
	let error = ref(false)
	const { proxy } : any = getCurrentInstance()
	interface Props {
		show: boolean
		icon?: string
		animation?: boolean
		text?: string
		height?: string
		mode?: string
	}
	const props = withDefaults(defineProps<Props>(), {
		show: false,
		//${uni.$baseUrl}
		// @ts-ignore
		icon: `${uni.$baseUrl}/common/loading.gif`,
		animation: true,
		text: '',
		height: '100%',
		mode: 'show'
	})
	const emits = defineEmits(['retry'])
	watch(()=> props.show,(newVal) => {
		if (!showPage.value) {
			setTimeout(()=>{
				showPage.value = newVal
			},300)
		}
		if (newVal) {
			clearInterval(timer.value)
		}
	})
	// 计时
	const timing = () => {
		clearInterval(timer.value)
		timer.value = setInterval(() => {
			if (time.value <= 1) {
				error.value = true
				time.value = timeout
				clearInterval(timer.value)
			} else {
				time.value--
			}
		}, 1000)
	}
	// 点击重试
	const onRetry = () => {
		let pages = getCurrentPages()
		let current = pages[pages.length - 1]
		let url = current.route
		// @ts-ignore
		if (JSON.stringify(current.$page.options) != '{}') {
			// @ts-ignore
			url += proxy.$u.queryParams(current.$page.options)
		}
		if (['pages/home/index', 'pages/find/index', 'pages/live/index', 'pages/news/index',
				'pages/me/index'
			].indexOf(url) > -1) {
			uni.reLaunch({
				url: `/${url}`
			});
		} else {
			uni.redirectTo({
				url: `/${url}`
			});
		}
		emits('retry')
	}
	onLoad(()=>{
		timing()
	})
</script>

<style lang="scss">
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.page-loading {
		
		.loading {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.icon {
				width: 100rpx;
				height: 100rpx;
			}

			.text {
				color: #666;
				font-size: 26rpx;
			}

			.btn-retry {
				height: 60rpx;
				display: flex;
				background: linear-gradient(0deg, #FBD220, #FFE23E);
				color: #3D3D3D;
				font-size: 28rpx;
				margin-top: 60rpx;
				border-radius: 8rpx;
				width: 200rpx;
			}
		}

		.flex {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.show {
			animation: fadeIn .3s forwards;
		}
	}
</style>